<template>
    <div class="box">
        <el-card>
            <template #header>
                <h3>商家注册页面</h3>
            </template>
            <el-form ref="refForm" label-width="100px" :model="businessData" :rules="rules">
                <el-form-item label="商家账号" prop="account">
                    <el-input v-model="businessData.account"></el-input>
                </el-form-item>
                <el-form-item label="商家密码" prop="password">
                    <el-input v-model="businessData.password" type="password"></el-input>
                </el-form-item>
                <el-form-item label="商家电话" prop="telephone">
                    <el-input v-model="businessData.telephone"></el-input>
                </el-form-item>
                <el-form-item label="联系人姓名" prop="contact">
                    <el-input v-model="businessData.contact"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-space :size="30">
                        <el-button @click="regist" type="primary">注册</el-button>
                        <el-button @click="resetForm" type="danger">重置</el-button>
                        <el-link @click="$router.push('/businessLogin')">已有账号，去登录</el-link>
                    </el-space>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import axios from 'axios';
import qs from "qs";
export default {
    data() {
        return {
            // 商家注册时的对象
            businessData: {},
            // 校验规则
            rules: {
                account: { required: true, message: "账号不能为空", trigger: "blur" },
                password: [
                    { required: true, message: "密码不能为空", trigger: "blur" },
                    { min: 6, max: 12, message: "长度必须6~12位", trigger: "blur" },
                ],
                telephone: {
                    required: true,
                    message: "手机号不能为空",
                    trigger: "blur",
                },
                contact: {
                    required: true,
                    message: "联系人姓名不能为空",
                    trigger: "blur",
                },
            },
        };
    },
    methods: {
        //点击注册
        regist() {
            // 提交数据之前，需要对表单进行统一的校验，只有所有必填项都填写了，才能正常的提交
            this.$refs.refForm.validate((valid) => {
                if (valid) {
                    // 提交数据
                    axios.post("http://127.0.0.1:8080/javaweb_ele/businessRegist", qs.stringify(this.businessData)).then(resp => {
                        // 注册成功，应该跳转到登录页面
                        if (resp.data == 1) {
                            // 给个提示信息
                            ElNotification({
                                type: "success",
                                message: "注册成功，去登录"
                            });
                            this.$router.push("/businessLogin");
                        }
                    })
                }
            });
        },
        resetForm() {
            this.$refs.refForm.resetFields();
        },
    },
};
</script>

<style scoped>
.box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(D:\Vue.Dr\ele.vue\ele-project\src\img\birdbackground.jpg);
    background-size: cover;
    /* 背景图片覆盖整个容器 */
    background-position: center;
    /* 背景图片居中显示 */
    background-repeat: no-repeat;
}

.el-card {
    width: 500px;
    opacity: 0.8;
}
</style>